<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<!--payment -->
		<div class="payment m1280">Payment</div>
		<!-- /div -->
		<div class="boxWai m1280 f f-j-b">
			<div class="leftBox">
				<div class="paywith f f-a-c f-j-b">
					<div class="payLef">
						<div class="name">Pay with</div>
						<div class="count">More payment method coming soon</div>
					</div>
					<div class="rigImg">
						<img src="/src/assets/pay.png" alt="" />
					</div>
				</div>
				<div class="xian"></div>
				<!--下面的子元素 -->
				<div class="payList f f-a-c f-w-w">
					<div class="payItem f f-a-c">
						<div @click="setlesInp(1)" class="imgBox hand">
							<img v-if="ind == 1" src="/src/assets/user/gou.png" alt="" />
							<img v-else src="/src/assets/user/weigou.png" alt="" />
						</div>
						<div class="">
							<div class="topName">Gavin</div>
							<div class="topNum">**** 0568</div>
						</div>
						<div class="edit hand">Edit</div>
					</div>
					<div class="payItem f f-a-c">
						<div @click="setlesInp(2)" class="imgBox hand">
							<img v-if="ind == 2" src="/src/assets/user/gou.png" alt="" />
							<img v-else src="/src/assets/user/weigou.png" alt="" />
						</div>
						<div class="">
							<div class="topName">Gavin</div>
							<div class="topNum">**** 0568</div>
						</div>
						<div class="edit hand">Edit</div>
					</div>
					<div class="payItem f f-a-c f-j-c hand"><span>+ Add debit card</span></div>
				</div>
			</div>
			<div>
				<div class="rightBox">
					<div class="price">Price</div>
					<div class="subtotal f f-a-c f-j-b">
						<div class="lefTit">Subtotal</div>
						<div class="rigPrice">$86.00</div>
					</div>
					<div class="subtotal f f-a-c f-j-b">
						<div class="lefTit">Service Fee</div>
						<div class="rigPrice">$86.00</div>
					</div>
					<div class="subtotal f f-a-c f-j-b">
						<div class="lefTit">Total</div>
						<div class="rigPrice">$86.00</div>
					</div>
					<!-- btn -->
					<div @click="gosuccess" class="conBtn hand">Continue&pay</div>
					<!-- ment -->
					<div class="suoZhu f f-a-c f-j-c">
						<img src="/src/assets//suo.png" class="suoImg" alt="" />
						SSL Secure Payment
					</div>
				</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let ind = ref(1);
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const setlesInp = num => {
		ind.value = num;
	};
	// /跳转到成功
	const gosuccess = num => {
		router.push({
			path: "/UseSuccessfullyPaid"
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
